<template>
<div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        v-for="(item, index) in swiperInfo"
        class="swiper-slide" :id="item.name"
        :key="index">
        <el-row :gutter="32">
          <el-button
            v-if="index!==3"
            type="info"
            style="margin-left: 70vw;margin-top: 2vh;" @click="goTo">跳过</el-button>
          <div v-else style="width: 100vw;height: 2vh;margin-top: 5vh;"></div>
        </el-row>
        <el-row :gutter="32">
          <span class="swiper-title">{{ item.words }}</span>
          <div class="swiper-bottomBlock"></div>
        </el-row>
        <el-row :gutter="32" style="margin-top: 6vh;">
          <span class="swiper-content">{{ item.content}}</span>
        </el-row>
        <el-row>
          <img class="swiper-img" :src="item.img" alt="">
        </el-row>
        <el-row v-if="index===3">
          <el-button type="primary" round @click="goTo">立即体验</el-button>
        </el-row>
      </div>
    </div>
    <div class="swiper-pagination"></div>

  </div>
</div>

</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.min.css'
export default {
  name: 'guidePage',
  data () {
    return {
      swiper: null,
      swiperInfo: [
        {
          name: 'jiaXiao',
          words: '家校联合',
          content: '来于家庭，源于学校',
          img: require('../assets/jiaxiao.png')
        },
        {
          name: 'dorm',
          words: '寝室建设',
          content: '共建寝室，乐于生活',
          img: require('../assets/qinshi.png')

        },
        {
          name: 'info',
          words: '信息查询',
          content: '高效浏览，方便快捷',
          img: require('../assets/信息查询.png')
        },
        {
          name: 'zongCe',
          words: '综测管理',
          content: '足不出户，掌上搞定',
          img: require('../assets/book.png')
        }
      ]
    }
  },
  mounted () {
    this.swiper = new Swiper('.swiper-container', {
      loop: false,
      // spaceBetween: 300,
      autoplay: 100,
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
        clickable: true,
        bulletActiveClass: 'my-bullet-active'
      }
    })
  },
  methods: {
    goTo () {
      this.$router.push('login')
    }
  }
}
</script>

<style scoped>
.swiper-container{
  width: 100vw;
  height: 100vh;
  --swiper-pagination-color: black;/* 两种都可以 */
}
/*.swiper-wrapper{*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*  white-space:nowrap;*/

/*}*/
.swiper-slide{
  width: 100vw;
  height: 100vh;
  background: red;
}
#jiaXiao{
  background-image: linear-gradient(to bottom, rgba(179, 210, 228, 1), rgba(230, 249, 255, 1));
}
#dorm {
  background-image: linear-gradient(to bottom, rgba(228, 214, 188, 1), rgba(254, 246, 233, 1));
}
#info{
  background-image: linear-gradient(to bottom, rgba(229, 196, 189, 1), rgba(253, 238, 231, 1));
}
#zongCe{
  background-image: linear-gradient(to bottom, rgba(138, 189, 255, 1), rgba(228, 248, 254, 1));
}
.swiper-title{
  font-size: 2rem;
  margin-left: -50vw;
  z-index: 22;
}
.swiper-bottomBlock{
  width: 28vw;
  height: 1vh;
  background: rgba(184, 181, 181, 0.8);
  position: relative;
  left: 20vw;
  top:-1vh;
  z-index: 1;
}
.swiper-img{
  margin: 10vh auto;
  width: 80vw;
  height: auto;
}
.swiper-pagination{
  position: absolute;
  bottom:0;
  width: 100vw;
  height: 10vh;
  /*background: black;*/
  color:black;
}
.swiper-content{
  font-size: 1.2rem;
}
</style>
